<template>
    <div class="indexsliderad">
            <div v-for="(item, key) in sliderList" :key="key"  >
                <div v-if="key === 0">
                    <div class="div1"><img  v-bind:src="item.img" @click="showDetail(item.type,item.val)"></div>
                </div>
                <div v-if="key === 1">
                    <div class="div2"><img v-bind:src="item.img" @click="showDetail(item.type,item.val)"></div>
                </div>
                <div v-if="key === 2">
                    <div class="div3"><img  v-bind:src="item.img" @click="showDetail(item.type,item.val)"></div>
                </div>
            </div>
        <div style="clear: both"></div>
    </div>
</template>

<script type="text/babel">
export default {
    data () {
        return {
            sliderList: []
        }
    },
    mounted () {
        this.getSliderList()
    },
    methods: {
        // 获取 轮播图
        getSliderList () {
            this.$api.slider({code: 'index_ad'}, res => {
                this.sliderList = res.data.list
            })
        },
        showDetail (type, val) {
            if (type === 1) {
                window.location.href = val
            } else if (type === 2) {
                this.$router.push({path: '/goodsdetail', query: {goods_id: val}})
            } else if (type === 3) {
                this.$router.push({path: '/article', query: {article_id: val}})
            } else if (type === 4) {
                this.$router.push({path: '/articlelist', query: {type_id: val}})
            }
        }
    }
}
</script>

<style type="text/css">
    .indexsliderad{
        height: 100%;
        margin-top:.2rem;
    }
    .div1 {float:left; width:50%; }
    .div1 img{ width: 100%}
    .div2 {float:right; width:50%;}
    .div2 img{ width: 100%}
    .div3 {float:right; width:50%;}
    .div3 img{ width: 100%}
</style>
